<template>
  <div class="message-list">
    <h3>留言内容</h3>
    <n-spin :show="requesting" size="small">
      <n-list>
        <n-list-item v-for="item in data" :key="item.id" @click="selection(item)"
                     :style="mode === 2 && modifiable(item) ? {backgroundImage: 'linear-gradient(135deg, #dad29950, #b0dab950)'} : {}">
          <n-thing>
            <template #description>
              <div class="message-item">
                <div class="title">
                  <n-text prefix="bar">
                    <n-ellipsis :line-clamp="1" :tooltip="false">
                      {{ item.title }} {{ item?.reply_content ? '（已回复）' : ''}}
                    </n-ellipsis>
                  </n-text>
                </div>
                <div class="date">
                  <n-p depth="3">
                    {{ item.create_date.split(" ")[0] }}
                  </n-p>
                </div>
              </div>
            </template>
          </n-thing>
        </n-list-item>
      </n-list>
    </n-spin>
    <div class="page-toolbar">
      <n-space justify="end">
        <n-button @click="turnFirstPage" :disabled="requesting">首页</n-button>
        <n-button @click="lastPage" :disabled="requesting">上一页</n-button>
        <n-button @click="nextPage" :disabled="requesting">下一页</n-button>
      </n-space>
    </div>
  </div>
</template>

<script setup>
import {useRequests} from "@/common/requests.js";
import {useMessage, useNotification} from "naive-ui";
import {onMounted, ref} from "vue";
import {useUserStore} from "@/stores/user.js";

const props = defineProps(['mode'])
const emits = defineEmits(['selection'])

const store = useUserStore()
const requests = useRequests()
const message = useMessage()
const notify = useNotification()

const data = ref([])
const hasNextPage = ref(true)
const page = ref({
  page: 1,
  offset: 10
})

const requesting = ref(false)
const fetch = () => {
  if (requesting.value) {
    return false
  }

  requesting.value = true
  requests.message.list(page.value).then(resp => {
    requesting.value = false

    return resp
  }).then(resp => {
    if (resp.ret === 0) {
      data.value = resp.data.list
      hasNextPage.value = data.value.length >= page.value.offset
    } else {
      message.error(resp?.data ?? resp?.message ?? '未知错误')
    }
  }).catch(err => {
    console.log(err)

    notify.error({title: '出错了', content: err.toString(), duration: 3000})
  })
}

const turnFirstPage = () => {
  page.value.page = 1
  fetch()
}

const lastPage = () => {
  if (page.value.page > 1) {
    page.value.page--
    fetch()
  } else {
    message.info("已经到顶了")
  }
}

const nextPage = () => {
  if (hasNextPage.value) {
    page.value.page++
    fetch()
  } else {
    message.info("已经到底了")
  }
}

const selection = item => {
  if (props.mode === 2 && !modifiable(item)) {
    return message.info("你不可以修改这条留言")
  }

  emits('selection', item)
}

const modifiable = item => {
  if (item.reply_content) {
    return false
  }

  return item.user_id === store.id;
}

const updateMessageItem = item => {
  for (let i = 0; i < data.value.length; i++) {
    const msg = data.value[i]
    if (msg.id === item.id) {
      data.value[i] = {...msg, ...item}
      return
    }
  }
}

const reload = () => {
  fetch()
}

onMounted(() => {
  fetch()
})

defineExpose({
  updateMessageItem,
  reload
})
</script>

<style lang="scss" scoped>
.n-list {
  height: 36rem;

  .message-item {
    cursor: pointer;
    display: flex;

    .title {
      flex: 1;
    }

    .date {
      margin-left: 1rem;
    }
  }
}
</style>
